<template>
  <div class="pic-box">
    <div class="show-box">
      <img :src="`/images/hotel-pics/${picUrl}`" alt />
    </div>
    <div class="pic-list">
      <span v-for="(item,index) in pics" :key="index">
        <img :src="`/images/hotel-pics/${item.name}`" @click="showPic(index)" alt />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picUrl: "1.jpeg",
      pics: [
        {
          name: "1.jpeg"
        },
        {
          name: "2.jpeg"
        },
        {
          name: "3.jpeg"
        },
        {
          name: "4.jpeg"
        },
        {
          name: "5.jpeg"
        },
        {
          name: "6.jpeg"
        }
      ]
    };
  },
  methods: {
    showPic(index) {
      this.picUrl = this.pics[index].name;
    }
  }
};
</script>
<style lang="less" scoped>
// 响应式布局
.pic-box {
  display: flex;
  width: 100%;
  height: 380px;
  padding: 20px 0;

  .show-box {
    flex: 6;
    height: 100%;
    margin-right: 20px;

    > img {
      width: 100%;
      height: 100%;
    }
  }

  .pic-list {
    flex: 4;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    justify-content: space-between;

    span {
      width: 48%;
      height: 31%;
      margin-bottom: 10px;

      > img {
        width: 100%;
        height: 100%;
      }

      &:nth-last-child(-n + 2) {
        margin: 0;
      }
    }
  }
}
</style>
